Fix critical issues: mobile scrolling, auto mode crash, and wrapAround itemsToScroll #527
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix Critical Issues: Mobile Scrolling, Auto Mode Crash, and Enhanced Robustness
Summary
This PR addresses three critical issues in the vue3-carousel component:
The changes are targeted and focused on the specific root causes identified in each issue, with comprehensive test coverage maintained.
Review & Testing Checklist for Human
itemsToShow: 'auto'and verify no crashes occur with different slide counts and sizesRecommended test plan:
pnpm dev) and test mobile scrolling in browser dev tools mobile modeitemsToShow: 'auto'with different slide configurationsDiagram
%%{ init : { "theme" : "default" }}%% graph TD useDrag["src/composables/useDrag.ts<br/>Touch event handling"]:::major-edit Carousel["src/components/Carousel/Carousel.ts<br/>Main carousel logic"]:::major-edit calculateAverage["src/utils/calculateAverage.ts<br/>Number validation utility"]:::minor-edit touchEvents["Touch Events<br/>(touchstart, touchmove)"]:::context autoMode["Auto Mode<br/>(itemsToShow: 'auto')"]:::context visibleRange["visibleRange computation<br/>Slide positioning"]:::context useDrag -.->|"passive: isTouch"| touchEvents Carousel -.->|"safety guards"| autoMode Carousel -.->|"iteration limits"| visibleRange calculateAverage -.->|"isFinite() validation"| Carousel subgraph Legend L1[Major Edit]:::major-edit L2[Minor Edit]:::minor-edit L3[Context/No Edit]:::context end classDef major-edit fill:#90EE90 classDef minor-edit fill:#87CEEB classDef context fill:#FFFFFFNotes
!isTouchtoisTouch- this allows native scrolling on touch devices while preserving drag prevention on mouse eventsslidesRectcontains invalid values